<template>
  <div>
    <div class="publicHeader-wrapper" :class="'skin-' + $root.skin">
      <div class="publicHeader-content">
        <div class="publicHeader-time">
          <img
            src="../assets/images/icon-menu.png"
            @click="showSlider"
            class="colse-btn"
          />
          <div
            class="publicHeader_date"
            v-text="dayText"
            style="margin-right: 8px"
          ></div>
          <div class="publicHeader_date" v-text="timeText"></div>
          <div class="publicHeader_date" v-text="lunarText"></div>
        </div>
        <div class="publicHeader-title">国家税务总局北京市税务局</div>
        <div class="publicHeader_tab">
          <div
            class="item"
            :class="{ bg: item.page == page }"
            v-for="(item, index) in publicTabList"
            :key="index"
            @click.stop="nav(item)"
          >
            <img :src="item.iconUrl" alt class="img" />
            <span class="label" v-text="item.tabValue"></span>
            <img
              v-if="item.icon"
              src="~@/assets/images/icon-tran.png"
              alt
              class="icon"
            />
            <div v-if="item.icon" class="select-wrapper">
              <div
                class="select-item border"
                @click.stop="$root.changeSkin('1')"
              >
                皮肤1
              </div>
              <div class="select-item" @click.stop="$root.changeSkin('2')">
                皮肤2
              </div>
            </div>
          </div>
        </div>
        <img
          v-if="mode == 'dzh'"
          @click="dahSwitchClick"
          class="dzh-switch"
          src="@/assets/images/icon-close.png"
        />
      </div>
    </div>
    <div class="slider-wrapper" @click="show = false" :class="{ show: show }">
      <div class="slider-item" v-for="(item, index) in slider" :key="index">
        <div class="title">{{ item.name }}</div>
        <img class="image" @click.stop="nav(item)" :src="item.img" alt />
      </div>
    </div>
  </div>
</template>

<script>
import solarLunar from "solarlunar";
import axios from "axios";
import duoYun from "../assets/images/weatherImg/duoyun.png";
import Lei from "../assets/images/weatherImg/lei.png";
import Qing from "../assets/images/weatherImg/qing.png";
import shaChen from "../assets/images/weatherImg/shachen.png";
import Wu from "../assets/images/weatherImg/wu.png";
import xiaoYu from "../assets/images/weatherImg/xiaoyu.png";
import Xue from "../assets/images/weatherImg/xue.png";
import Yin from "../assets/images/weatherImg/yin.png";
import YuImg from "../assets/images/weatherImg/yu.png";
import YunImg from "../assets/images/weatherImg/yun.png";
import publicIcon0 from "../assets/images/publicHeaderIcon00.png";
import publicIcon1 from "../assets/images/publicHeaderIcon01.png";
import publicIcon2 from "../assets/images/publicHeader02.png";
import publicIcon3 from "../assets/images/publicHeader03.png";
import Index from "../assets/images/screen-index.png";
import Dengji from "../assets/images/screen-dengji.png";
import Shenbao from "../assets/images/screen-shenbao.png";
import Jicha from "../assets/images/screen-jicha.png";
import Shouru from "../assets/images/screen-shouru.png";
import Sjgz from "../assets/images/screen-sjgz.png";

export default {
  name: "publicHeader",
  props: {
    mode: {
      default: "",
    },
    page: {
      default: "index",
    },
  },
  data() {
    return {
      show: false,
      slider: [
        {
          name: "首页",
          img: Index,
          router: "/shouye",
          window: "_self",
        },
        {
          name: "登记",
          img: Dengji,
          router: "/dengji",
          window: "_self",
        },
        {
          name: "收入",
          img: Shouru,
          router: "/shouru",
          window: "_self",
        },
        {
          name: "申报",
          img: Shenbao,
          router: "/shenbao",
          window: "_self",
        },
        {
          name: "稽查",
          img: Jicha,
          router: "/jicha",
          window: "_self",
        },
        {
          name: "数据共治",
          img: Sjgz,
          router: "/gongzhi",
          window: "_self",
        },
      ],
      timeText: "",
      dayText: "",
      lunarText: "",
      weatherImgUrl: "",
      tabIndex: 0,
      publicTabList: [
        {
          iconUrl: publicIcon0,
          tabValue: "首页",
          page: "index",
          router: "/shouye",
          window: "_self",
        },
        {
          iconUrl: publicIcon1,
          tabValue: "我的",
          page: "my",
          router: "/diy",
          window: "_self",
        },
        {
          iconUrl: publicIcon2,
          tabValue: "换肤",
          icon: true,
        },
        {
          iconUrl: publicIcon3,
          tabValue: new Date().getFullYear() - 1 + "年",
          router: "http://68.12.185.58/cxkj/work/dpzs/index.html#/shouye", //测试
          window: "_blank",
        },
      ],
    };
  },
  mounted() {
    // 获取日期/时间
    this.timeData();
    this.getTianQiData();
  },
  methods: {
    dahSwitchClick() {
      this.$emit("dahSwitchClick");
    },
    nav(item) {
      if (item.tabValue == "换肤") {
        return;
      }
      if (!item.router) return;
      this.show = false;
      // window.location.href = item.router;
      if (item.router.indexOf("http://") > -1) {
        window.open(item.router, item.window);
      } else {
        this.$router.push({
          path: item.router,
          query: this.$route.query,
        });
      }
    },
    showSlider() {
      this.show = true;
    },
    // 获取时间
    timeData() {
      let _this = this;
      //获取当前年
      var year = new Date().getFullYear();
      //获取当前月
      var month = new Date().getMonth() + 1;
      //获取当前日
      var date = new Date().getDate();
      _this.dayText = year + "年" + month + "月" + date + "日";
      let tempLunar = solarLunar.solar2lunar(year, month, date);
      this.lunarText = "(农历" + tempLunar.monthCn + tempLunar.dayCn + ")";
      setInterval(function () {
        var hours = new Date().getHours();
        var minutes = new Date().getMinutes();
        var seconds = new Date().getSeconds();
        if (hours < 10) {
          hours = "0" + hours;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        if (seconds < 10) {
          seconds = "0" + seconds;
        }
        _this.timeText = hours + ":" + minutes + ":" + seconds;
      }, 1000);
    },
    // 获取获取当前日期
    getYearStartDateAndEndDate() {
      // 获取当前日期
      var date = new Date();
      // 获取当前月份
      var nowMonth = date.getMonth() + 1;
      // 获取当前是几号
      var strDate = date.getDate();
      // 添加分隔符“-”
      var seperator = "-";
      // 对月份进行处理，1-9月在前面添加一个“0”
      if (nowMonth >= 1 && nowMonth <= 9) {
        nowMonth = "0" + nowMonth;
      }
      // 对月份进行处理，1-9号在前面添加一个“0”
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      // 最后拼接字符串，得到一个格式为(yyyy-MM-dd)的日期
      var nowDate =
        date.getFullYear() + seperator + nowMonth + seperator + strDate;
      return nowDate;
    },
    // 获取当前年份的第一天
    getYearStartDate() {
      // 获取当前日期
      var date = new Date();
      var startYearDate = date.getFullYear() + "-01-01";
      return startYearDate;
    },
    // 获取天气
    getTianQiData() {
      axios
        .get(
          "https://www.yiketianqi.com/free/day?appid=95181786&appsecret=81ha4yt1&cityid=101010100&vue=1&unescape=1"
        )
        .then((res) => {
          // console.log(res);
          // console.log(res.data.wea_img);
          if (res.data) {
            if (res.data.wea_img) {
              this.weaImgFun(res.data.wea_img);
            }
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    weaImgFun(wea_img) {
      switch (wea_img) {
        case "duoyun":
          this.weatherImgUrl = duoYun;
          break;
        case "lei":
          this.weatherImgUrl = Lei;
          break;
        case "xue":
          this.weatherImgUrl = Xue;
          break;
        case "shachen":
          this.weatherImgUrl = shaChen;
          break;
        case "bingbao":
          this.weatherImgUrl = xiaoYu;
          break;
        case "yun":
          this.weatherImgUrl = YunImg;
          break;
        case "yu":
          this.weatherImgUrl = YuImg;
          break;
        case "yin":
          this.weatherImgUrl = Yin;
          break;
        case "qing":
          this.weatherImgUrl = Qing;
          break;
        default:
          this.weatherImgUrl = Wu;
      }
    },
    // 点击tab
    publicTabItemBtn(item, index) {
      this.tabIndex = index;
      switch (item.tabValue) {
        case "首页":
          this.$router.push({
            path: "/mapView",
          });
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.publicHeader-wrapper {
  position: relative;
  z-index: 999;
  height: 62px;
  background-size: 100% 100%;
  &.skin-1 {
    background-image: url("~@/assets/images/skin/1-main-title.png");
  }

  &.skin-2 {
    background-image: url("~@/assets/images/skin/2-main-title.png");
  }

  .publicHeader-content {
    position: relative;
    display: flex;
    align-items: center;
    .publicHeader-time {
      flex: 1;
      display: flex;
      align-items: center;
      font: 22px/62px "Adobe Heiti";
      color: #3898fc;
      .colse-btn {
        width: 30px;
        height: 20px;
        margin: 0 20px;
      }
    }
    .publicHeader-title {
      font: 700 36px/62px "Adobe Heiti";
      color: #ffffff;
      letter-spacing: 2px;
    }
    .publicHeader_tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      .item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 4px;
        width: 130px;
        height: 34px;
        font: 16px/21px "Adobe Heiti";
        color: #67b2ff;
        cursor: pointer;
        &.bg {
          background-image: url("~@/assets/images/publicHeaderTab_bgc.png");
          background-size: 100% 100%;
        }
        .img {
          margin-right: 12px;
          width: 24px;
          height: 24px;
        }
        .label {
          font-size: 16px;
        }
        .icon {
          margin-left: 8px;
          width: 10px;
          height: 6px;
        }
        .select-wrapper {
          position: absolute;
          width: 86px;
          height: 102px;
          background: linear-gradient(180deg, #081a80, #369eff);
          border-radius: 9px;
          padding: 7px;
          display: none;
          flex-direction: column;
          top: 32px;
          left: 30px;
          .select-item {
            flex: 1;
            font-size: 17px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .border {
            border-bottom: 1px solid #ffffff20;
          }
        }
        &:hover {
          .select-wrapper {
            display: flex;
          }
        }
      }
    }
    .dzh-switch {
      position: absolute;
      top: 0;
      right: 120px;
      transform: rotate(-90deg);
      transform-origin: 100% 0;
    }
  }
}
.slider-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -364px;
  width: 364px;
  border-right: 2px solid rgba(255, 255, 255, 0.47);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16x;
  z-index: 9999;
  padding-top: 60px;
  overflow-y: auto;
  transition: left 0.3s;
  &.show {
    left: 0;
  }
  &.hide {
    left: -364px;
  }
  .slider-item {
  }
  .title {
    height: 70px;
    line-height: 60px;
    background-image: url("../assets/images/bg-nav-title.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    color: #ffffff;
    font-size: 22px;
    text-shadow: 3px 2px 4px 0px rgba(0, 0, 0, 1);
  }
  .image {
    margin: 8px auto;
    width: 324px;
    height: 183px;
  }

  box-shadow: inset -5px 0px 8px 6px rgba(199, 181, 181, 0.16);
  background-color: rgba(80, 87, 89, 0.8);
}
</style>
